<template>
  <div class="comment">
    <div class="centent" v-for="(value, index) in dataList" :key="index">
      <!-- 传递递归组件二级评论 -->
      <DatailRecursion :parent="value" />
      <div class="height">
        <div class="img">
          <img
            :src="$axios.defaults.baseURL + value.account.defaultAvatar"
            alt=""
          />
        </div>
        <h5>{{ value.account.nickname }}</h5>
        <div>{{ value.created_at | dateForm }}</div>
      </div>
      <div class="fotter">
        <div>{{ value.content }}</div>
        <div
          :class="{ active: value.pics.length > 0 }"
          v-if="value.pics.length != 0"
        >
          <div v-for="(v, i) in value.pics" :key="i">
            <img :src="$axios.defaults.baseURL + v.url" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import DatailRecursion from "@/components/post/DatailRecursion";
import moment from "moment";
export default {
  components: {
    DatailRecursion,
  },
  data() {
    return {
      comments: [], // 评论数据
      total: 10, // 总条数
      pageIndex: 1, // 当前页码
      pageSize: 5, // 每一页的条数
      dataList: [],
    };
  },
  mounted() {
    this.$axios({
      url: "/posts/comments",
      params: {
        post: this.$route.query.id,
      },
    }).then((res) => {
      this.comments = res.data.data;
      this.total = res.data.data.length;
      console.log(this.comments.length);
      this.getPage();
      // 把评论的条数出粗到 store 里
      this.$store.commit("comment/setComment", this.comments.length);
    });
  },
  // 处理时间
  filters: {
    dateForm(el) {
      return moment(el).format("YYYY-MM-DD HH:mm");
    },
  },
  methods: {
    /**
     * 分页的计算封装 使用 slice
     * 条数 0-9 10-19 20-29 30-39
     * 页码  1    2     3    4
     * 结束位置  当前的页码 乘以 当前页的条数
     * 开始位置  用结束的位置减去当前页的条数
     * 使用slice 规定从开始的位置 到结束的位置  第一个是开始的位置  第二个是结束的位置
     */
    getPage() {
      const end = this.pageIndex * this.pageSize;
      const bigin = end - this.pageSize;
      this.dataList = this.comments.slice(bigin, end);
    },
    // 改变每条页数士会触发
    handleSizeChange(val) {
      console.log(val);
      this.pageSize = val;
      this.getPage();
    },
    // 改变页码士会触发
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getPage();
    },
  },
};
</script>
<style lang="less" scoped>
.active {
  display: flex;

  img {
    height: 80px;
    width: 80px;
  }
}
.centent {
  width: 700px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 15px;
  .height {
    display: flex;
    font-size: 14px;
    align-items: center;
    img {
      height: 16px;
      width: 16px;
    }
    h5 {
      color: #888;
      margin: 0 10px;
    }
  }
  .fotter {
    padding: 15px 0;
  }
}
.paging {
  width: 700px;
  margin: 15px 0;
  display: flex;
  justify-content: center;
}
</style>